<template>
  <div class="app-action">
    <!-- app数据管理 内容分析 -->
    <el-row
      type="flex"
      justify="start">
      <el-input
        v-model="searchParams.userName"
        class="user-name"
        placeholder="请输入用户名查找" />
      <el-button
        type="primary"
        @click="handleSearch">
        搜索
      </el-button>
    </el-row>
    <content>
      <el-row :gutter="40">
        <el-col
          :span="6"
          class="user-msg">
          <p>用户信息</p>
          <div>用户名：{{ userName }}</div>
          <div>性别：  {{ sex }}</div>
          <div>年龄：  {{ age }}</div>
        </el-col>
        <el-col :span="16">
          <CommonTable
            ref="useractionpath"
            is-standard-data
            :table-head="[ { label: '时间', prop: 'time' }, { label: '行为', prop: 'name' } ]"
            :search-params="searchParams"
            url="/midea/menu/analyse/useractionpath"
            title="操作行为："
            @getData="getData"
          />
        </el-col>
      </el-row>
    </content>
  </div>
</template>

<script>
import CommonTable from '../components/CommonTable'

export default {
  components: { CommonTable },
  data () {
    return {
      // 搜索条件
      searchParams: {
        // dayweekmonth: 0,
        // endTime: '2020-8-8',
        // startTime: '2016-2-3',
        // userId: '',
        userName: ''
      },
      userName: '',
      sex: '',
      age: ''
    }
  },
  methods: {
    handleSearch () {
      this.$refs.useractionpath.handleSearch()
    },
    getData (data) {
      if (data.length) {
        this.userName = data[0].userName
        this.sex = data[0].sex
        this.age = data[0].age
      } else {
        this.userName = this.sex = this.age = ''
      }
    }
  }
}
</script>

<style lang="scss">
.app-action {
  .user-name {
    width: 300px;
  }
  .user-msg {
    padding-top: 20px;
    div {
      line-height: 2;
      color: #909399;
    }
  }
  content {
    p {
      line-height: 2;
      font-weight: bold;
      font-size: 20px;
      span {
        float: right;
        color: blue;
      }
    }
  }
}
</style>
